<script setup lang="ts">
import CodeMirror from 'vue-codemirror6'
import { json } from '@codemirror/lang-json'
import { onBeforeMount, ref, watch } from 'vue'
import { generate } from '../generator'
import { useSettingsStore } from '../store'
import { downloadTextFile, toCamelCase } from '../util'

const input = ref(`{
  "a": 1,
  "b": 1.1,
  "c": true,
  "d": {
    "a": 1,
    "dd": {
      "cc": ""
    }
  }
}`)
const output = ref('')

const regenerateOutputs = () => {
  output.value = generate(input.value, {
    generateExample: settingsStore.generateExample,
    intentSpacesNumber: settingsStore.intentSpaces,
    rootClassName: settingsStore.rootClassName,
  })
}

let handler: number | undefined = undefined
onBeforeMount(() => {
  watch(input, () => {
    if (handler !== undefined) {
      clearInterval(handler)
    }
    handler = setTimeout(() => {
      regenerateOutputs()
      handler = undefined
    }, 500)
  }, { immediate: true })
  watch(() => [
    settingsStore.generateExample,
    settingsStore.intentSpaces,
    settingsStore.rootClassName,
  ], regenerateOutputs)
})

const settingsStore = useSettingsStore()

const download = () => {
  downloadTextFile(output.value, toCamelCase(settingsStore.rootClassName) + '.cj')
}

const copy = () => {
  navigator.clipboard.writeText(output.value)
}

</script>

<template>
  <main class="w-full h-[calc(100vh-10rem)] p-8 flex flex-row items-center justify-between">
    <CodeMirror
      class="editor w-full h-[calc(100vh-12rem)] overflow-auto bg-white shadow-md"
      :lang="json()"
      v-model="input"
      basic
      wrap
    />
    <CodeMirror
      class="editor w-full h-[calc(100vh-12rem)] mx-8 overflow-auto bg-white shadow-md"
      basic
      wrap
      readonly
      v-model="output"
    />
    <div class="w-128 h-[calc(100vh-12rem)] overflow-auto bg-white shadow-md flex flex-col items-stretch justify-start">
      <div class="p-4 bg-zinc-200 font-bold">设定</div>
      <div class="p-4">
        <v-text-field
          label="缩进" suffix="个空格" type="number"
          color="purple-darken-2"
          v-model="settingsStore.intentSpaces"
        />
        <v-text-field
          label="根节点类名"
          color="purple-darken-2"
          v-model="settingsStore.rootClassName"
        />

        <v-switch
          label="生成示例代码"
          color="purple-darken-2"
          v-model="settingsStore.generateExample"
        />
      </div>

      <div class="p-4 bg-zinc-200 font-bold">操作</div>
      <div class="p-4 flex flex-col items-stretch justify-start">
        <v-btn
          variant="outlined" color="purple-darken-2"
          append-icon="mdi-download" @click="download">
          下载生成结果
        </v-btn>
        <v-btn
          color="purple-darken-2" append-icon="mdi-content-copy"
          class="mt-4" @click="copy">
          复制到剪贴板
        </v-btn>
      </div>
    </div>
  </main>
</template>

<style>
.cm-editor {
  height: 100%;
}
::-webkit-scrollbar {
  display: none;
}
</style>